<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 70px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 70px;
    display: block;
  }

</style>
<template>
  <div>
    <br>

    <el-form :inline="true">
      <el-form-item label="按钮名称:">
        <el-select v-model="searchMap.position" placeholder="请输入按钮名称进程搜索" filterable clearable>
          <el-option
            v-for="item in positions"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>



    <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="按钮名称" width="200"></el-table-column>
      <el-table-column prop="code" label="按钮code" width="200"></el-table-column>
      <el-table-column prop="perms" label="权限标记" width="200"></el-table-column>
      <el-table-column  label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>




   <el-pagination
      @size-change="sizeData"
      @current-change="pageData"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form  label-width="80px">
        <el-form-item label="广告名称" >
          <el-col :span="11">
            <el-input v-model="pojo.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select v-model="pojo.position" placeholder="请选择广告位置">
              <el-option
            v-for="item in positions"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="/api/upload/image"
            name="image"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

        <el-form-item label="跳转页面" >
          <el-col :span="11">
            <el-input v-model="pojo.url"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="排序" >
          <el-col :span="11">
            <el-input v-model="pojo.bannerOrder"></el-input>
          </el-col>
        </el-form-item>


        <el-form-item label="上架时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="pojo.startTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="下架时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="pojo.endTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-col :span="11">
            <el-input type="textarea" v-model="pojo.description"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave()">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>



<script>
import bannerApi from "@/api/banner"
import moment from 'moment'

import {getToken} from "@/utils/auth"


export default {
  data() {
    return {
      list: [
        {"name":"添加","code":"add","perms":"security:add"},
        {"name":"修改","code":"update","perms":"security:update"},
        {"name":"删除","code":"delete","perms":"security:delete"}
      ],
      total: 0, // 总记录数
      searchMap: {
      page: 1, // 当前页
      limit: 10, // 每页大小
        // bannerName:'',
        // bannerLocation:'',
        // shelfTime:'',
        // status:''

      }, // 查询条件
      dialogFormVisible: false, // 编辑窗口是否可见
      pojo: {}, // 编辑表单绑定的实体对象
      id: '', // 当前用户修改的ID
      imageUrl:'',
      headers: { token : getToken() },
      value1:true,
      value2:false,
      positions: [{
        'id': 0,
        'value': '首页顶部'
      },
        {
          'id': 1,
          'value': '首页中部'
        }
      ],
      status:[{
        'id': 1,
        'value': '上架'
      },
        {
          'id': 0,
          'value': '下架'
        }]
    }
  },

  //在vue实例创建完成之后执行获取列表数据的方法
  created() {
    //this.fetchData()
  },



  methods: {

    sizeData(limit) {
      this.searchMap.limit=limit;
      this.fetchData()
    },

    pageData(page) {
      // console.log(page)

      this.searchMap.page=page;

      this.fetchData()
    },

    fetchData() {
      bannerApi.getList(this.searchMap).then(response => {
        this.list = response.data;
        this.total = response.count;
      })
    },
    handleSave() { 
      this.pojo.image=this.imageUrl
      bannerApi.update(this.id, this.pojo).then(response => {
        this.$message({
          message: response.msg,
          type: (response.code==0 ? 'success' : 'error')
        })
        if (response.code==0) { //  如果成功
          this.fetchData() // 刷新列表
        }
      })
      this.dialogFormVisible = false // 关闭窗口
    }, 
    handleEdit(id) {

    
      this.id = id
      this.pojo.bannerPicture = this.imageUrl
      this.dialogFormVisible = true // 打开窗口
      if (id !== '') { // 修改
        bannerApi.findById(id).then(response => {

          if (response.code==0) {
            this.pojo = response.data
            this.imageUrl=this.pojo.image
          }
        })
      } else {
        this.pojo = {} // 清空数据
        this.imageUrl=""
      }
    },

    handleDelete(id) {
      this.$confirm('确定要删除此纪录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        bannerApi.delete(id).then(response => {
          this.$message({ message: response.msg, type: (response.code==0 ? 'success' : 'error') })
          if (response.code) {
            this.fetchData() // 刷新数据
          }
        })
      })
    },
    handleAvatarSuccess(res, file) {

      this.imageUrl = res.data

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },


    //时间格式
    dateFormat(row,column){
      //获取当前数据
      let date=row[column.property]

      if(date==undefined){
          return ''
      }

      return moment(date).format('YYYY-MM-DD')
    }
  }
}
</script>
